<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <label for="">爱&emsp;好:</label>
            <input type="checkbox" name="hobby" value="sing">
            <input type="checkbox" name="hobby" value="dance">
            <input type="checkbox" name="hobby" value="rap">
            <input type="checkbox" name="hobby" value="basketball">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
</body>
<script>
    // URLSearchParams()  构造函数 => 可以接收对象/参数数据队列  => 解析为参数对象  => 可以通过对应的API方法增删改查对应的键名和键值

    var params = new URLSearchParams({
        user: "a123123",
        pwd: "123123",
        phone: "17386141517",
        email: "a1123123@163.com",
        hobby: ["sing", "dance", "rap", "basketball"],
    });

    // console.log(params);

    console.log(params.toString());


    // var params = new URLSearchParams("user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com&hobby=sing&hobby=dance&hobby=rap");

    // console.log(params.toString());


    // URLSearchParams相关的方法
    // set(key,val)   向参数对象中新增一条数据 (没有就新增 有就修改)
    // append(key,val)   向参数对象中追加一条数据 (没有就新增 有就修改)
    // get(key)   对应键名获取键值(如果有多个默认返回第一个)
    // getAll(key)   对应键名获取所有键值
    // has(key)   判断是否存在该键名
    // detele(key)   对应键名删除数据
    // forEach(function(val,key){})   对应键名遍历数据
    // toString()   将参数对象 转化为参数数据队列



    var params = new URLSearchParams();
    console.log(params);

    // set()  append()
    params.set("user", "a123123");
    params.set("pwd", "123123");
    params.set("phone", "17386141517");
    params.set("email", "123123@163.com");
    params.set("hobby", "sing");
    // params.set("hobby", "dance");  //覆盖

    params.append("hobby", "dance"); // 没有就新增 有就追加
    params.append("hobby", "rap"); // 没有就新增 有就追加


    // get()  getAll()
    // console.log(params.get("user"));
    // console.log(params.get("pwd"));
    // console.log(params.get("phone"));
    // console.log(params.get("email"));
    // console.log(params.get("hobby"));

    // console.log(params.getAll("hobby"));


    // has()
    // console.log(params.has("user"));
    // console.log(params.has("pwd"));
    // console.log(params.has("phone"));
    // console.log(params.has("email"));
    // console.log(params.has("hobby"));
    // console.log(params.has("aaaa"));


    // params.delete("user");
    // params.delete("pwd");
    // params.delete("phone");
    // params.delete("email");
    // params.delete("hobby");
    // params.delete("aaaa");


    params.forEach(function (val, key) {
        console.log(key, val);
    })



    console.log(params.toString());














</script>

</html>